<template>
    <box left="1336px"
         top="190px"
         width="526px"
         height="202px"
         title="用户评价">
        <div class="flex wrap align-start">
            <div class="left">
                <div class="flex item tm align-start">
                    <img src="../../../assets/img/dialog/icon-5.png"
                         alt=""
                         class="icon">
                    <div class="info">
                        <div class="flex space-between">
                            <label>天猫DSR描述/服务/物流</label>
                            <span class="val">{{info.tmScore?info.tmScore:""}}</span>
                        </div>
                        <div class="chart"
                             ref="chart-1"></div>
                    </div>
                </div>
                <div class="flex item jd align-start">
                    <img src="../../../assets/img/dialog/icon-7.png"
                         alt=""
                         class="icon">
                    <div class="info">
                        <div class="flex space-between">
                            <label>京东好评率</label>
                            <span class="val">{{info.jd?info.jd:""}}%</span>
                        </div>
                        <div class="chart"
                             ref="chart-2"></div>
                    </div>
                </div>
            </div>
            <div class="right">
                <div class="flex item align-start">
                    <img src="../../../assets/img/dialog/icon-4.png"
                         alt=""
                         class="icon">
                    <div class="info">
                        <div class="flex space-between">
                            <label>天猫综合体验星级</label>
                            <span class="val">{{info.tmStar?info.tmStar:""}}</span>
                        </div>
                        <div class="list">
                            <img src="../../../assets/img/dialog/icon-6.png"
                                 alt=""
                                 v-for="item in info.tmStar"
                                 :key="`star-${item}`">

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </box>
</template>

<script>
export default {
    props: {
        info: {},
    },
    watch: {
        info: {
            handler(newVal) {
                this.chartInit1(newVal.tmScore)
                this.chartInit2(newVal.jd)
            },
            deep: true,
        },
    },
    methods: {
        chartInit1(data) {
            let _chart = this.$echarts.init(this.$refs['chart-1'])

            let _option = {
                grid: {
                    top: 0,
                    bottom: 0,
                    left: '0%',
                    right: '0',
                },
                xAxis: {
                    show: false,
                    type: 'value',
                    boundaryGap: [0, 0],
                },
                yAxis: [
                    {
                        type: 'category',
                        axisLine: {
                            show: false,
                        },
                        axisTick: [
                            {
                                show: false,
                            },
                        ],
                        max: 5,
                    },
                ],
                series: [
                    {
                        name: '',
                        type: 'pictorialBar',
                        symbol: 'roundRect',
                        symbolSize: [5, 27],
                        symbolMargin: 2,
                        symbolRepeat: 'repeat',
                        symbolClip: true,
                        symbolPosition: 'start',
                        zlevel: 1,
                        itemStyle: {
                            normal: {
                                barBorderRadius: 37,
                                color: '#ffa200',
                            },
                        },
                        barWidth: 3,
                        data: [data],
                    },
                    {
                        name: '',
                        type: 'pictorialBar',
                        symbol: 'roundRect',
                        symbolSize: [5, 27],
                        symbolMargin: 2,
                        symbolRepeat: 'repeat',
                        symbolClip: true,
                        symbolPosition: 'start',
                        zlevel: 1,
                        barWidth: 27,
                        barGap: '-650%',
                        data: [5],
                        itemStyle: {
                            normal: {
                                color: 'rgba(28, 128, 213, 0.19)',
                                barBorderRadius: 30,
                            },
                        },
                    },
                ],
            }
            _chart.setOption(_option)
        },
        chartInit2(data) {
            let _chart = this.$echarts.init(this.$refs['chart-2'])

            let _option = {
                grid: {
                    top: 0,
                    bottom: 0,
                    left: '0%',
                    right: '0',
                },
                xAxis: {
                    show: false,
                    type: 'value',
                    boundaryGap: [0, 0],
                },
                yAxis: [
                    {
                        type: 'category',
                        axisLine: {
                            show: false,
                        },
                        axisTick: [
                            {
                                show: false,
                            },
                        ],
                        max: 5,
                    },
                ],
                series: [
                    {
                        name: '',
                        type: 'pictorialBar',
                        symbol: 'roundRect',
                        symbolSize: [5, 27],
                        symbolMargin: 2,
                        symbolRepeat: 'repeat',
                        symbolClip: true,
                        symbolPosition: 'start',
                        zlevel: 1,
                        itemStyle: {
                            normal: {
                                barBorderRadius: 37,
                                color: '#0080ff',
                            },
                        },
                        barWidth: 3,
                        data: [data],
                    },
                    {
                        name: '',
                        type: 'pictorialBar',
                        symbol: 'roundRect',
                        symbolSize: [5, 27],
                        symbolMargin: 2,
                        symbolRepeat: 'repeat',
                        symbolClip: true,
                        symbolPosition: 'start',
                        zlevel: 1,
                        barWidth: 27,
                        barGap: '-650%',
                        data: [100],
                        itemStyle: {
                            normal: {
                                color: 'rgba(28, 128, 213, 0.19)',
                                barBorderRadius: 30,
                            },
                        },
                    },
                ],
            }
            _chart.setOption(_option)
        },
    },
    created() {},
    mounted() {
        this.chartInit1()
        this.chartInit2()
    },
}
</script>
<style lang='less' scoped>
.wrap {
    .left {
        width: 280px;
        .item {
            width: 260px;
            height: 45px;
            margin: 20px 0;
            .icon {
                margin-right: 14px;
            }
            label {
                font-size: 16px;
            }
            .val {
                font-size: 16px;
                font-weight: bold;
            }
            .info {
                width: 220px;
            }
            &.tm {
                .val {
                    color: #ffa200;
                }
            }
            .chart {
                margin-top: 10px;
                width: 220px;
                height: 18px;
            }
            &.jd {
                .val {
                    color: #33aaff;
                }
            }
        }
    }
    .right {
        width: 200px;
        .item {
            width: 200px;
            height: 45px;
            margin: 20px 0;
            .icon {
                margin-right: 14px;
            }
            label {
                font-size: 16px;
            }
            .val {
                font-size: 16px;
                font-weight: bold;
            }
            .info {
                width: 160px;
            }
            .chart {
                margin-top: 10px;
                width: 160px;
                height: 18px;
            }
        }
    }
}
</style>
